<template>
  <el-row :gutter="20">
    <el-col
      v-for="(item, index) in prodList"
      :key="item.objectId"
      :span="6"
      :offset="0"
    >
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span class="title">{{item.name}}</span>
          </div>
        </template>
        <el-image :src="'https://omsv2-static.fnji.com/'+item.picLeft" fit="fill" :lazy="true"></el-image>
        
        <template #footer>
          <el-tag :type="item.fnjiType==1?'primary':'danger'">
            {{item.fnjiType==1?'家具':'家居'}}
          </el-tag>
          <el-tag type="success">{{item.category}}</el-tag>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
import { productGet } from "../../api/zsf_product";

//商品列表渲染
const prodList = ref([]);
let res = await productGet();
console.log(res);
prodList.value = res.data.results;
</script>

<style lang="scss" scoped>
/* 文本溢出显示省略号 */
.title{
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-col{
  margin-bottom: 20px
}
</style>
